<template>
  <div v-title="'名医列表 - 世外生活运营平台'">
    <mk-breadcrumb  :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
      <div class="PublicListStyle MkDoctorList">
        <mk-search-component :formArr="formArr"  inputPlaceholder = "名医编号/姓名/联系人/电话" @startSearch="fun_call_search">
        <span slot="slot_1">
            <el-button type="primary" size="" class='floatRight btn-create' @click="dialogVisible_add = true">新增名医</el-button>
        </span>
          <div  slot="slot_2" class="search-result-amount textAlignRight">
            <el-button type="primary" size="" class='floatRight btn-create' @click="dialogVisible_add = true">新增名医</el-button>
          </div>
        </mk-search-component>
        <div class="primary_bg trHasCursor tabContainer"   v-loading="loadingTab"
             element-loading-text="拼命加载中">
          <el-table
            :data="treatedOrderData.elements"
            style="width: 100%"
            @row-click='showDoctorDetail'>
            <el-table-column
              prop="number"
              label="名医编号"
              width="150px">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="name"
              label="姓名">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="phone"
              label="电话">
            </el-table-column>
            <el-table-column
              prop="cityName"
              width=''
              show-overflow-tooltip
              label="所在城市">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="department"
              label="科室">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="titleOfDoctor"
              label="职称">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="goodField"
              label="擅长领域">
            </el-table-column>
            <el-table-column
              width='120px'
              prop="status"
              label="展示状态">
              <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
            </el-table-column>
          </el-table>
          <el-pagination v-if='treatedOrderData.elements.length>0'
                         @current-change="loadData"
                         :current-page="treatedOrderData.page"
                         :page-size="treatedOrderData.size"
                         layout="total, prev, pager, next"
                         :total="treatedOrderData.totalAmount">
          </el-pagination>
        </div>

        <!--名医详情-->
        <MkDoctorDetail :showDialog="dialogVisible_detail" :currentCustomerId="currentCustomerId" @closeDialog="closeDialog_detail"></MkDoctorDetail>

        <!--新增名医-->
        <MkAddDoctor :showDialog="dialogVisible_add" @closeDialog="closeDialog_add"></MkAddDoctor>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
  import doctorService from './../../services/doctor'
  import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
  import MkAddDoctor from './MkAddDoctor.vue'
  import MkDoctorDetail from './MkDoctorDetail.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'MkDoctorList',
    components:{
      MkBreadcrumb,MkAddDoctor,MkDoctorDetail
    },
    watch: {},
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      cityList(state){
        this.$set(this.formArr,0,{
          formLabel:'所在城市',
          searchName:'cityArr',
          dataType:'array',
          componentType:'Cascader',
          changeOnSelect:false,
          optionsArr:state.doctor.cityData,
          defaultProps:{
            label: 'name',
            value: 'id',
            children: 'city'
          }
        })
      },
      departmentList(state){
        this.$set(this.formArr,1,{
          formLabel:'科室',
          searchName:'departmentId',
          dataType:'string',
          componentType:'Select',
          optionsArr: state.doctor.departments
        })
      },
      titleList(state){
        this.$set(this.formArr,2,{
          formLabel:'职称',
          searchName:'titleOfDoctorId',
          dataType:'string',
          componentType:'Select',
          optionsArr: state.doctor.titles
        })
      }
    }),
    filters: {
      formatStatus(cellValue){
        if(cellValue==='Show'){
          return '展示中'
        }else if(cellValue==='Hide'){
          return '已下架'
        }
      },
    },
    mounted: function () {
      this.$set(this.formArr, 3,{
        formLabel:'展示状态',
        searchName:'status',
        dataType:'string',
        componentType:'Select',
        optionsArr: [
          {name:'展示中',value:'Show'},{name:'已下架',value:'Hide'}
        ]
      });
      this.$store.dispatch('loadCity').then(()=>{
        return this.cityList
      });
      this.$store.dispatch('loadDepartments').then(()=>{
        return this.departmentList
      });
      this.$store.dispatch('loadTitles').then(()=>{
        return this.titleList
      });
//      this.loadDepartments();
//      this.loadTitles();
    },
    activated(){
      this.loadData(1);
    },
    methods: {
      fun_call_search(search,input) {
        this.searchCondition.departmentId = search.departmentId;
        this.searchCondition.titleOfDoctorId = search.titleOfDoctorId;
        this.searchCondition.status = search.status;
        this.searchCondition.provinceId = search.cityArr[0];
        this.searchCondition.cityId = search.cityArr[1]?search.cityArr[1]:'';

        this.searchCondition.search = input;

        this.loadData(1);
      },
      loadData(page) {
        if(page) {
            this.searchCondition['page.pn'] = page;
        }
        this.loadingTab = true;
        doctorService.loadDoctorList(this.searchCondition, (data) => {
          this.treatedOrderData = data.data;
          this.loadingTab = false;
        })
      },
      showDoctorDetail (row, event, column) {
        this.dialogVisible_detail = true;
        this.currentCustomerId = row.id;
      },
//      cityList() {
//      },
//      loadDepartments() {
//      },
//      loadTitles() {
//      },
      closeDialog_detail(type){
      	this.dialogVisible_detail=false;
        if(type){
          this.loadData();
        }
      },
      closeDialog_add(type){
      	this.dialogVisible_add = false;
      	if(type){
          this.loadData();
        }

      }
    },
    data () {
      return {
        formArr:[],
        loadingTab: false,
        dialogVisible_detail:false,
        dialogVisible_add:false,
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          search:'',
          cityId:'',
          fields:'',
          departmentId:'',
          provinceId:'',
          status:'',
          titleOfDoctorId:'',
        },
        treatedOrderData: {
          elements: [
          ],
          page: '',
          size: '',
          totalPages: '',
          totalAmount: ''
        },
        breadcrumbData:{
          list: [
            {name:'名医库',path: null, clickAble: false},
            {name: '名医列表',path: null, clickAble: false},
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'doctor-icon',
        },
        currentCustomerId:'',
      }
    },
  }
</script>
<style lang='less'>

</style>
